<template>
  <div id="keys">
    <div v-on:click="show = !show" class="main iconfont icon-gongneng01" >
    
    </div>
    <transition name="fade">
      <div v-if="show" class="home">首页</div>
    </transition>
     <transition name="fade">
      <div v-if="show" class="shara">付费</div>
    </transition>
     <transition name="fade">
      <div v-if="show" class="pay">对话</div>
    </transition>
     <transition name="fade">
      <div v-if="show" class="activity">活动</div>
    </transition>
</div>
</template>

<script>
export default {
    	data(){
            return{
                show: true 
            }
        },
      mounted (){
var box = document.getElementById('keys');
  console.log(box)

    var winWidth = window.innerWidth;
     console.log(winWidth)
    var winHeight = window.innerHeight;
    var endTouchY = 0;
    var endTouchX = 0;
    box.addEventListener('touchstart',function(ev){
        this.addEventListener('touchmove', function(ev){
            ev.preventDefault();
            var ev = ev.touches[0];
            box.style.top = (ev.pageY-75)+'px';
            box.style.left = (ev.pageX-75)+'px';
            endTouchX = ev.pageX;
            endTouchY = ev.pageY;
        },false);
        this.addEventListener('touchend', function(ev){
            this.ontouchmove = null;
            this.ontouchend = null;
             
            var x = (endTouchX-75)>0?(endTouchX-75):0;
            var y = (endTouchY-75)>0?(endTouchY-75):0;
            if(x==0 && y==0){
                return
            }else{
           x = (x>(winWidth-150))?(winWidth-100):x;
            y = (y>(winHeight-150))?(winHeight-150):y;
            box.style.left = x + 'px';
            box.style.top = y + 'px';
            }
         
           
        },false);
    },false);
      }
        
        
        
        }
</script>
<style lang="stylus" scoped>
   
      @import './icon/iconfont.css'
      #keys
        width: 82px;
        height: 114px;
        /* border: 1px solid #5a5a5a; */
        position: relative;
        position: fixed;
        bottom: 135px;
        right: 22px;
        font-size 12px
        color #ffffff
        z-index 999
       
 

      .main
        width 32px
        height 32px
        border 1px solid #E5E5E5
        border-radius 15px
        position absolute
        bottom 50%
        right 10px
        transform:translateY(14px) 
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 20px;
        color #2A96F5
        background-color: #fff;
        
      .home
        width 30px
        height 30px
        border-radius 15px
        position absolute
        top 0
        right 10px
        line-height 30px
        text-align center
        background-color #00C9C2
        color #ffffff
      .shara
        width 30px
        height 30px
        border-radius 15px
        position absolute
        bottom 0
        right 10px  
        line-height 30px
        text-align center
        color #ffffff
        background-color #EF5B49
      .pay
        width 30px
        height 30px
        border-radius 15px
        position absolute
        bottom 20px
        left 0
        line-height 30px
        text-align center
        background-color #F2128D
        color #ffffff  
      .activity
        width 30px
        height 30px
        border-radius 15px
        position absolute
        top 20px
        left 0
        line-height 30px
        text-align center  
        background-color #2A96F5
        color #ffffff
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
      opacity: 0
    }
</style>

